<template>
	<div class="Cinemaname">
		<div class="Cinemanames">
			<div class="">
				<div>
					<div class="dep1"><span id="shop">{{cinemaList.nm}}</span>
						<div><img src="./images/icon/add_icon.png"></div>
					</div>
					<p class="dep2">
						<img src="./images/icon/star_icon.png">
						<img src="./images/icon/star_icon.png">
						<img src="./images/icon/star_icon.png">
						<img src="./images/icon/star_icon.png">
						<img src="./images/icon/star_icon.png">
						<span>评分 ：9.0</span>
					</p>
					<p class="dep3">改签 WIFI 停车场 观影小食 激光巨幕</p>
					<p class="dep3">{{cinemaList.addr}}</p>
					<p class="dep4">335km</p>
				</div>
			</div>
		</div>
		<p class="dep4 dep5">温馨提示 ：电影开场前15分钟关闭在线售票通道</p>
	</div>
</template>

<script>
	export default {
		props: ['cinemaList'],
		data() {
			return {
			
			}
		},
		mounted() {
			// this.id = this.$route.query.id
		}
	}
</script>

<style>
	.Cinemaname {
		margin: 10px;
		font-size: 10px;
	}

	.Cinemanames {
		padding: 20px;
		border-radius: 5px;
		background-color: #f1f5f5;
	}

	.dep1 {
		height: 32px;
		display: flex;
		justify-content: space-between;
	}

	.dep1 span {
		font-size: 20px;
		 text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
	}

	.dep1 div {
		padding: 5px;
		border-radius: 30px;
		background-color: #f1f5f5;
	}

	.dep2 {
		margin-bottom: 8px;
	}

	.dep2 img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.dep2 span {
		color: #f73171;
	}

	.dep3 {
		color: #808080;
		margin-bottom: 8px;
	}

	.dep4 {
		color: #eca805;
	}

	.dep5 {
		margin-top: 10px;
		margin-bottom: 10px;
	}
</style>
